<template>
    <div class="content-box">
      <div ref="searchBox" class="search-box flex" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :rules="queryRules"
          :inline="true"
          label-width="130px"
        >
        <el-form-item label="手机号MD5" prop="phoneMd5">
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="queryParams.phoneMd5"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单号" prop="orderId">
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="queryParams.orderId"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              plain
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
  
      <div class="table-box">
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="handleQuery"
            :columns="columns"
          ></right-toolbar>
        </el-row>
        <el-table
          v-sticky-header
          ref="table"
          v-loading="loading"
          :data="dataList"
          border
        >
          <template v-for="(item,index) in columns">
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="getColumnWidth(index)"
              align="center"
              :fixed="item.fixed"
              :sortable="item.sortable ? item.sortable : false"
              :show-overflow-tooltip="item.showTooltip"
              v-if="item.visible"
            >
              <template slot-scope="scope">
                <template v-if="Object.prototype.toString.call(scope.row[item.prop]) === '[object Object]'">
                  <!-- 子表数据 -->
                  <div class="tableChild">
                      <div :class="['tableItem',itemChild === 'result'?'oneEqually':'']" 
                      v-for="itemChild in Object.keys(scope.row[item.prop])"
                      :key="itemChild"
                      >
                         <template v-if="itemChild !== 'isRed'">
                            <div class="tableLable">
                              {{ titleOptions[itemChild]}}
                            </div>
                            <div class="tableValue">
                               <!-- 是否比对结果 -->
                               <template v-if="itemChild === 'result'">
                                <span :style="{color: !scope.row[item.prop].isRed?'green':'red'}">
                                {{ scope.row[item.prop][itemChild]}}
                                </span>
                               </template>
                               <template v-else>
                                {{ scope.row[item.prop][itemChild] }}
                               </template>
                          </div>
                        </template>
                      </div>
                  </div>
                </template >
                <template v-else>
                  {{ scope.row[item.prop] }}
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  import tableStickyMixins from "@/mixins/tableStickyMixins";
  import { mapGetters } from "vuex";
  import {
    queryComparisonByPhoneMd5,
  } from "@/api/customer/dataComparison";
  
  export default {
    // 定义名字用于标识该组件是否被keep-alive缓存
    name: "DataComparison",
    data() {
      return {
        // 数据列表
        dataList: [],
        // 查询参数
        queryParams: {},
        queryRules:{
          phoneMd5:[
            { required: true, message: "请填写手机号MD5", trigger: "blur" },
          ],
        },
        loading: false,
        // 表格列信息
        columns: [
          {label: `手机号MD5`,prop: "phoneMd5",visible: true,pcWidth: 280,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `订单号`,prop: "orderId",visible: true,pcWidth: 330,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `撞库时间`,prop: "checkTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `回调时间`,prop: "notifyTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `进件时间`,prop: "inTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `推送时间`,prop: "pushTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `年龄`,prop: "age",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `京东白条`,prop: "baiTiao",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `营业执照`,prop: "busLicense",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `车产信息`,prop: "car",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `城市编码`,prop: "cityCode",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `城市名称`,prop: "cityName",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `客户端类型`,prop: "clientType",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `信用情况`,prop: "credit",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `信用卡`,prop: "creditCard",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `学历`,prop: "education",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `公积金`,prop: "fund",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `房产`,prop: "house",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `花呗`,prop: "huaBei",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `经营流水`,prop: "incomeWater",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `用户ip`,prop: "ip",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `职业`,prop: "job",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `工龄`,prop: "jobTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `贷款金额`,prop: "loanMoney",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `最低月收入`,prop: "minIncome",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `保险保单`,prop: "policy",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `贷款用途`,prop: "purpose",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `芝麻分`,prop: "sesame",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `性别`,prop: "sex",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `社保`,prop: "social",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `贷款期限`,prop: "termNum",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
          {label: `工资发放形式`,prop: "wages",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        ],
        // 显示搜索栏
        showSearch: true,
        // 字段映射名称
        titleOptions:{
          "check":'撞库',
          "isRed":'是否标红',
          "push":'推送',
          "result":'比对结果',
        },
        
      };
    },
    mixins: [tableStickyMixins],
    watch: {
      columns: {
        handler() {
          this.updateTableHeight();
        },
        deep: true,
      },
    },
    created() {
    },
    computed: {
      ...mapGetters(["sidebar", "device"]),
      // 计算当前列元素在所处环境的宽度
      getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
      },
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // 完全重置到初始状态
        this.$set(this, "queryParams", {});
        this.$nextTick(() => {
          this.getList();
        });
       
      },
      /** 查询列表 */
      getList() {
        this.$refs.queryForm.validate((valid) => {
          if (valid) {
            // 验证通过查询数据
            this.loading = true;
            queryComparisonByPhoneMd5(this.queryParams).then((response) => {
              this.dataList = response.data
              this.loading = false;
            }).catch((err) => {
              setTimeout(() => {// 延迟2s后自动取消加载状态
                this.loading = false;
              }, 2000);
            })
          }
        })
      },
      // 修改表格高度触发回调
      updateTableHeight() {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
     
    },
  };
  </script>
  
  <style scoped lang="scss">
  .title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
  }
  .search-box {
    margin: 0 0 20px;
    padding: 20px 20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
  }
  .search-area {
    position: absolute;
    right: 20px;
  }
  .el-form-item__content {
    flex: 1;
    line-height: 40px;
    position: relative;
    font-size: 14px;
    min-width: 0;
  }
  ::v-deep .el-dialog__body {
    border-top: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
  }
  .el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
  }
  .tableChild{
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    color:#6994e9;
    .tableItem{
      flex: 1 1 50%; // 每个子盒子占 50% 的宽度，最多 2 个子盒子一行
      max-width: 50%;
      .tableLable{
        word-break: break-word;
        background-color: #f8f8f9;
        color: #515a6e;
        font-size: 13px;
        border: 1px solid #dfe6ec;
        padding: 5px 0;
      }
      .tableValue{
        text-align: center;
        background-color: #fff;
        border: 1px solid #dfe6ec;
        border-top: none;
        padding: 5px 0;
      }
    }
    .oneEqually{
      flex: 1 1 100%; // 每个子盒子占 25% 的宽度，最多 4 个子盒子一行
      max-width: 100%;
    }
  }
</style>
  